import React from 'react'
import { Swiper } from 'antd-mobile'
import PropTypes from 'prop-types'
import {useNavigate} from 'react-router-dom'
export default function AntSwiper(props) {
  const navigate = useNavigate()
  function tiao(id){
    console.log('tiao0------------------------');
    navigate('/detail/'+id)
  }
  return (
    <>
        <Swiper autoplay loop autoplayInterval={2000}    
            indicator={(total, current) => (
              <div style={{position:'absolute',bottom:'10px',right:'10px',color:'#fff'}}>
                {`${current + 1} / ${total}`}
              </div>
            )}>
            {
              props.arr.length>0?props.arr.map((ele,index)=>{
                    return <Swiper.Item key={index}>
                      {
                        ele.id?<img src={ele.imgUrl} width='100%' onClick={tiao.bind(null,ele.id)} alt="" /> :<img src={ele.imgUrl} width='100%'  alt="" /> 
                      }
                    </Swiper.Item>
                }):<Swiper.Item></Swiper.Item>
            }
        </Swiper>
    </>
  )
}
//props数据类型
AntSwiper.propTypes={
    arr:PropTypes.array.isRequired
}
